<template>
  <div>

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" >
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="名称">
              <a-input placeholder="请输入名称" v-model="queryParam.userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="名称">
              <a-input placeholder="请输入名称" v-model="queryParam.userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8" >
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button @click="searchQuery" type="primary"  icon="search">查询</a-button>
              <a-button @click="searchReset" type="primary"  icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

    <!-- 按钮区域 -->
      <div class="table-operator">
        <a-button  @click="openEdit()" type="primary" icon="plus">新增</a-button>
      </div>
    </div>

    <!-- table区域 -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading">

        <span slot="action" slot-scope="text, record">
          <a @click="openEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

    </a-table>

    <!-- 表单区域 -->
    <SysUserModel ref="modalForm" @ok="modalFormOk"></SysUserModel>
  </div>
</template>
<script>
import {TableMixin} from "../../mixins/TableMixin";
import SysUserModel from  "./model/SysUserModel"
export default {
    name:"SysUserList",
    mixins:[TableMixin],
    components:{
        SysUserModel
    },
    data() {
        return {
            columns: [
                {
                    title: 'id',
                    align:"center",
                    dataIndex: 'id'
                },
                {
                    title: '用户名',
                    align:"center",
                    dataIndex: 'userName',
                },
                {
                    title: '密码',
                    align:"center",
                    dataIndex: 'passWord',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align:"center",
                    scopedSlots: { customRender: 'action' },
                }
            ],
            url: {
                list: "/api/sys/user/list",
                delete: "/api/sys/user/delete",
            },
        };
    },
};
</script>
